今天給大家帶來一些比較少用到，但是我覺得還滿有趣的標籤

圖片picture

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

這個標籤很特別，可以讓在在不同網頁大小顯示不同圖片。上面是拿w3c school的例子來看看。

上面的例子簡單來說就是在最小寬度的會顯示這張圖片

<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">

接下來到了465px會顯示這張圖片

<source media="(min-width:465px)" srcset="img_white_flower.jpg">

那理所當然到了 650px會顯示這張圖片

<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">

所以在做RWD響應式網頁設計可以顯示不同圖片!讓你更容易去對你的版面進行更改。

看到這邊一定心理疑問什麼是RWD? 之後有機會在跟大家介紹

如果想知道的小夥伴可以先問問google大神。

音頻audio

接下來我是自己覺得這個滿有趣的啦，之前有試過想把音效或音樂放在網頁裡可以用這個。

這邊一樣是w3c school上的例子

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

該<audio>標籤包含一個或多個 <source>具有不同音頻源的標籤。瀏覽器將選擇它支持的第一個音源。

<audio>和標籤之間的文本</audio> 只會在不支持該<audio>元素的瀏覽器中顯示，那當然它也有一些屬性可以用

autoplay = "autoplay" 自動撥放

controls = "controls"  指定應該要顯示音頻控件（例如播放)

loop = "loop" 循環撥放

muted = "muted" 指定音頻輸出應該要靜音

preload = "auto" "metadata" "none"  這邊有三種值，決定載入頁面的時候是否要自動載入音訊

src= "./路徑" 這當然毫無疑問就是音頻的路徑

有興趣的小夥伴可以去試試看，但是我覺得有點麻煩的是現在免費音檔我自己覺得很難取得XD。

重要性強調的標籤

粗體<strong> </strong>
斜體<em> </em>
刪除線<del></del>

這些標籤可以讓你強調文字重要性使用

那今天針對HTML的標籤介紹就到這邊，各位明天見摟!

參考文獻

W3C SCHOOL